<form class="layui-form" action="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex">
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" id="searchDate" placeholder="yyyy-MM-dd" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
            </div>
        </div>
    </div>

</form>
<table id="usertable" lay-filter="usertable"></table>

<script>
    layui.use('table', function(){
        var $ = layui.$;
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;

        //渲染搜索表单的性别
        form.render();

        laydate.render({
            elem: '#searchDate'
        });

        //第一个实例
        table.render({
            elem: '#usertable'
            ,url: '/user/getUserByCondition' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,limits: [2,4,6,8,10,12,14,16,18,20]
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名'}
                ,{field: 'sex', title: '性别', templet: function (d) {
                        return d.sex === "1" ? '男' : '女';
                    }}
                ,{field: 'birthday', title: '生日'}
                ,{field: 'registTime', title: '注册日期', sort: true}
                ,{fixed: 'right', align:'center', toolbar: '#user-edit-bar', title: "操作"}
            ]]
        });
        table.on('toolbar(usertable)', function(obj){
            switch(obj.event){
                case 'export':
                    // layer.msg("export");
                    // 发送ajax请求，需要服务端接口返回一个文件名
                    $.ajax({
                        url: '/user/export',
                        method: 'get',
                        success: function (result) {
                                console.log(result);
                            // 根据返回的文件名去下载文件
                            window.location.href = "/download?filename="+result.data;
                        }
                    });

                    break;
                case 'add':
                    //弹出一个窗口
                    openEditWindow(null);
                    layer.msg('添加');
                    break;
                case 'delete':
                    //取出选中行的id
                    var data = table.checkStatus('usertable').data;
                    console.log(data);
                    if (data.length > 0) {
                        layer.confirm('真的删除行吗？', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: '/user/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.code === 1) {
                                        table.reload('usertable', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    //layer.msg('删除');
                    break;
            }
        });

        //监听行工具事件
                    table.on('tool(usertable)', function (obj) {
                        console.log(obj);
                        var data = obj.data;
                        switch (obj.event) {
                            case 'edit-user': {
                                openEditWindow(data);
                                break;
                            }

            }
        });


        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html():$('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),
                        //  url: '/sys/customer/update',
                        data: data == null ? $("#user-add-form").serialize():$("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            console.log(result.code)
                            if (result.code === 1) {
                                table.reload('usertable', {}); //刷新数据表格
                                layer.close(index); //关闭弹层
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading'); //关闭弹出层动画加载效果
                        },
                        error: function (result) {
                            layer.closeAll('loading'); //关闭弹出层动画加载效果
                            layer.msg("用户操作失败");
                        }
                    });
                }, success: function (layero, index) {
                    form.render();
                    //日期
                    laydate.render({
                        elem: '#birthday'
                    });
                    laydate.render({
                        elem: '#registTime'
                    });
                    laydate.render({
                        elem: '#birthday1'
                    });
                    laydate.render({
                        elem: '#registTime1'
                    });
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });
        }

        //监听搜索表单的提交事件
        form.on('submit(searchBtn)', function (data) {
            console.log(data.field);
            // 让数据表格中的数据根据查询条件重新加载
            table.reload('usertable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="export">全量导出</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>-->
    </div>
</script>

<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

            <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>

<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>


